import React from 'react';
import { Row, Col, Form } from 'antd';
import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { InputC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../components';

class InputCDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }

  handleChange = () => {
    console.log(this.formRef.current.getFieldsValue());
    this.formRef.current.setFieldsValue({ input20: '666' });
  };

  render() {
    return (
      <Form ref={this.formRef} labelWrap={true}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='input输入框' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input1' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              showALLValue={true}
              onBlur={() => {
                console.log(111);
              }}
              // showTextArea={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input2' // Form识别的Item ID
              initialValue='3333'
              onChange={(e) => console.log(e)}
              showALLValue={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='placeholder' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input3' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              placeholder='placeholder'
              suffix={<DownOutlined />}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='不允许清空' />
            <InputC
              title='普通输入且标题需要换行显示' // 显示名称
              dataIndex='input4' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              allowClear={false}
              suffix={<DownOutlined />}
              rightContent={<PlusOutlined />}
              showALLValue={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='必填' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input5' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              rules={[{ required: true, message: '请输入' }]}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='前缀' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input6' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              prefix='￥'
              style={{ color: 'red' }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='后缀' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input7' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              suffix='RMB'
              helper='help提示：请输入数字'
              styleRow={{ color: 'red' }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='禁用设置布局' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input8' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              disabled={true}
              formItemLayout={{ labelCol: { span: 12 }, wrapperCol: { span: 6 } }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='文本域' />
            <InputC
              showTextArea={true}
              title='普通文本域' // 显示名称
              dataIndex='input9' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              disabled={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='文本域' />
            <InputC
              showTextArea={true}
              title='最大输入5个字' // 显示名称
              dataIndex='input10' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              max={5}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='文本域' />
            <InputC
              showTextArea={true}
              title='输入无限制' // 显示名称
              dataIndex='input11' // Form识别的Item ID
              onChange={(e) => console.log(e)}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='文本域' />
            <InputC
              showTextArea={true}
              title='自适应高度' // 显示名称
              dataIndex='input12' // Form识别的Item ID
              onChange={(e) => console.log(e)}
              // formItemLayout={{ labelCol: { span: 3 } }}
              autosize={true}
              onBlur={() => {
                console.log(2222);
              }}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='改变值' />
            <InputC
              title='普通输入' // 显示名称
              dataIndex='input20' // Form识别的Item ID
            />
            <PrimaryC title='点击更改' onClick={this.handleChange} />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default InputCDemo;
